<!DOCTYPE html>
<html>
<head>
    {{template "header"}}
</head>
<body>
<script>
    webix.ready(function () {
        let cid = webix.uid()
        let tid = webix.uid()
        let evtSource = null;
        let updateLog = function () {
            $$(cid).clear()
            if (evtSource) {
                evtSource.close()
            }
            evtSource = new EventSource('{{.prefix}}/console/sse?sign=1&topic=' + $$(tid).getValue() + "&token={{.token}}");
            evtSource.onmessage = function (e) {
                $$(cid).append(e.data)
            }
        }
        webix.ui({
            rows: [
                {
                    css: "query-toolbar",
                    paddingX: 10,
                    cols: [
                        {
                            view: "text", id: tid, placeholder: "关键词"
                        },
                        {
                            view: "button", label: "更新", css: "webix_transparent", type: "icon", icon: "mdi mdi-refresh", borderless: true, width: 70,
                            click: updateLog
                        },
                        {
                            view: "button", label: "清除", css: "webix_transparent", type: "icon", icon: "mdi mdi-trash", borderless: true, width: 70,
                            click: function () {
                                $$(cid).clear()
                            }
                        }, {}
                    ]
                },
                {
                    padding: 10,
                    rows: [
                        {
                            id: cid, view: "webconsole", scroll: "auto"
                        }
                    ]
                }
            ]
        })
        updateLog()
    })
</script>
</body>
</html>